<template>
  <div class="orderdetail">
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单详情"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <!-- 订单详情卡片 -->
    <div class="ordercard">
      <van-card
        v-for="item in cardDetail.orderLines"
        :key="item.id"
        :num="item.number"
        :price="item.price"
        :desc="item.product.description"
        :title="item.product.name"
        :thumb="item.product.photo"
      />
    </div>
    <!-- 总计 -->
    <div class="total">
      <van-divider />
      <van-row type="flex">
        <van-col offset="18" span="3">合计： </van-col>
        <van-col style="height: 22px; line-height: 22px; color: red" span="3"
          >¥ {{ total }}</van-col
        >
      </van-row>
      <van-divider />
    </div>
    <div style="height: 30px"></div>
    <!-- 服务详情 -->
    <div class="service">
      <div class="servBox">
        <van-row type="flex">
          <van-col offset="2" span="20"
            >服务地址：
            {{
              this.$route.query.item.address.province +
              this.$route.query.item.address.city +
              this.$route.query.item.address.area +
              this.$route.query.item.address.address
            }}</van-col
          >
          <van-col offset="2" span="20"
            >联系方式： {{ this.$route.query.item.address.username }}({{
              this.$route.query.item.address.telephone
            }})</van-col
          >
          <van-col offset="2" span="20">下单时间： {{ orderTime }}</van-col>
          <van-col offset="2" span="20">服务时间： {{ serveTime }}</van-col>
          <van-col offset="20" span="4"
            >{{ this.$route.query.item.status }}
          </van-col>
        </van-row>
      </div>
    </div>

    <!-- 接单 -->
    <div class="subButton">
      <van-button
        v-if="this.$route.query.item.status == '待接单'"
        style="width: 95%; font-weight: bold"
        type="primary"
        size="large"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="subOrder"
        >接 单</van-button
      >
      <van-button
        v-else-if="this.$route.query.item.status == '待服务'"
        style="width: 95%; font-weight: bold"
        type="primary"
        size="large"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="configOrder"
        >确认完成订单</van-button
      >
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import moment from "moment";
export default {
  data() {
    return {
      orderId: this.$route.query.item.id,
      cardDetail: this.$route.query.item,
      total: this.$route.query.item.total,
      serveTime: moment(new Date(this.$route.query.item.serviceTime)).format(
        "YYYY-MM-DD"
      ),
      orderTime: moment(new Date(this.$route.query.item.orderTime)).format(
        "YYYY-MM-DD"
      ),
    };
  },
  computed: {},
  methods: {
    getServiceDetail() {
      // console.log(this.cardDetail);
    },
    // 接单按钮
    async subOrder() {
      let data = {
        orderId: this.orderId,
      };
      let res = await get("/order/takeOrder", data);
      if (res.data.status == 200) {
        setTimeout(() => {
          this.$toast("接单成功！，请注意服务时间");
          this.$router.go(-1);
        },3000);
      }
      console.log(res);
    },
    // 确认接单
    async configOrder(){
      let data = {
        orderId: this.orderId,
      };
      let res = await get("/order/serviceCompleteOrder", data);
      if (res.data.status == 200) {
        this.$toast("服务完成！再接再厉");
        this.$router.go(-1);
      }

      console.log(res);
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getServiceDetail();
  },
};
</script>

<style scoped>
.service {
  height: 150px;
  width: 90%;
  background: #f8f8f8;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.servBox {
  color: #999999;
  /* width: 90%; */

  margin: 0 auto;

  font-size: 12px;
}
.subButton {
  margin-top: 50px;
  text-align: center;
  /* margin: 50px 10px; */
}
.van-col {
  margin-top: 10px;
}
/* .van-col .van-col--20 .van-col--offset-2{
  margin: 10px;
} */
/* .van-col,.van-col--23,.van-col--offset-1{
  margin: 5px;
} */
</style>